<template>
  <div class="coderBox">
    <Header class="header"></Header>
    <div class="mainBox">
      <Left></Left>
      <Middle @dragover="dragOver" @drop.prevent="dropFn"></Middle>
      <Right></Right>
    </div>
  </div>
</template>
<script setup lang="ts">
import Header from "./compt/header/index.vue";
import { initEditor } from "./editor/index";
import { typeList } from "@/views/coderCreate/index";
import Left from "./compt/left/index.vue";
import Right from "./compt/right.vue";
import Middle from "./compt/middle/index.vue";
import { utilDeepClone } from "@/assets/utils/deepClone";
import { utilCombineObj } from "@/assets/utils";
const dragStore = useDrag();
// 需要在dragOver里面阻止默认行为 才能触发dropFn事件
function dragOver(e: DragEvent) {
  e.preventDefault();
}
function formItemDrag({ dragCurrent, time }: { dragCurrent: IStdOFormItemDrag; time: string }) {
  if (dragStore.enterItem?.type !== "container" || dragStore.enterItem?.key == "cTable") return ElMessage.error(`只能插入至表单`);
  let returnObj: IStdOFormItemRender = {
    pid: dragStore.enterItem.id,
    id: time,
    key: dragCurrent.key,
    click: false,
    leaveElement: false,
    discribe: dragCurrent.leftOpt.label,
    type: dragCurrent.type,
    highEdit: dragCurrent.highEdit,
    props: dragCurrent.middleOpt.props || {},
    methods: dragCurrent.middleOpt.methods
  };
  returnObj.props.itemKey = time;
  // let form = dragStore.refList[dragStore.enterItem.highEdit.ref].dataed.formRef.form;
  // form[returnObj.props.itemKey] = returnObj.props.modelValue;
  dragStore.enterItem.childrens.push(utilDeepClone(returnObj));
}
function tableDrag({ dragCurrent, time }: { dragCurrent: IStdOContainerDrag; time: string }) {
  if (dragStore.enterItem) return ElMessage.error(`不允许插入其他容器`);
  let returnObj: IStdOTableRender = {
    key: "cTable",
    childrens: [],
    highEdit: { ref: dragCurrent.middleOpt.highEdit.ref + time },
    typed: "containerTable",
    methods: {},
    type: dragCurrent.type,
    leaveElement: false,
    click: false,
    props: dragCurrent.middleOpt.props || {},
    id: time,
    discribe: dragCurrent.leftOpt.label
  };
  dragStore.renderData.push(utilDeepClone(returnObj));
}
function formDrag({ dragCurrent, time }: { dragCurrent: IStdOContainerDrag; time: string }) {
  if (dragCurrent.key == "cTable") return;
  if (dragStore.enterItem) return ElMessage.error(`不允许插入其他容器`);
  let returnObj: IStdOSearchFormRender | IStdODioFormRender | IStdOPageFormRender = {
    key: dragCurrent.key,
    childrens: [],
    highEdit: { ref: dragCurrent.middleOpt.highEdit.ref + time },
    typed: "containerForm",
    methods: {
      emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => {
        let curentItem = dragStore.renderData.find((item) => {
          return item.id === time;
        });
        let data = curentItem?.props;
        objd.propsName.map((ite, index) => {
          if (index != objd.propsName.length - 1) {
            data = data[ite];
          }
        });
        data[objd.propsName[objd.propsName.length - 1]] = utilCombineObj(data[objd.propsName[objd.propsName.length - 1]], objd.e, true);
      }
    },
    type: dragCurrent.type,
    leaveElement: false,
    click: false,
    props: dragCurrent.middleOpt.props || {},
    id: time,
    formParams: {},
    otherProps: dragCurrent.middleOpt.otherProps,
    discribe: dragCurrent.leftOpt.label
  };
  return dragStore.renderData.push(utilDeepClone(returnObj));
}
function tableItemDrag({ dragCurrent, time }: { dragCurrent: IStdOTableItemDrag; time: string }) {
  if (dragStore.enterItem?.key !== "cTable") return ElMessage.error(`只能插入至表格`);
  let returnObj: IStdOTableItemRender = {
    id: time,
    discribe: dragCurrent.leftOpt.label,
    highEdit: dragCurrent.highEdit,
    key: dragCurrent.key,
    type: dragCurrent.type,
    props: dragCurrent.middleOpt.props || {},
    click: false,
    pid: dragStore.enterItem.id
  };
  return dragStore.enterItem.childrens.push(utilDeepClone(returnObj));
}
async function dropFn(e: DragEvent) {
  e.stopPropagation();
  e.preventDefault();
  if(!dragStore.dragCurrent) return
  let time = String(new Date().getTime());
  let nowTypeItem = typeList[dragStore.dragCurrent.type];
  if (!nowTypeItem) return ElMessage.error(`找不到该项`);
  // if (dragStore.dragCurrent.type == "example") {
  //   const ab = await import(`./example/${dragStore.dragCurrent.key}.ts`);
  //   importJSON(JSON.stringify(ab.default));
  //   return;
  // }
  // if (!dragStore.enterItem && dragStore.dragCurrent.type == "container") {
  //   if (dragStore.leaveItem) {
  //     let index = dragStore.renderData.findIndex((item) => {
  //       return item.id == dragStore.leaveItem.id;
  //     });
  //     return dragStore.renderData.splice(dragStore.renderData[index].leaveElement == "back" ? index : index + 1, 0, utilDeepClone(obj));
  //   }
  // }
  if (dragStore.dragCurrent.type == "formItem") return formItemDrag({ time, dragCurrent: dragStore.dragCurrent });
  if (dragStore.dragCurrent.key == "cTable") return tableDrag({ time, dragCurrent: dragStore.dragCurrent });
  if (dragStore.dragCurrent.type == "container") return formDrag({ time, dragCurrent: dragStore.dragCurrent });
  if (dragStore.dragCurrent.type == "tableItem") return tableItemDrag({ time, dragCurrent: dragStore.dragCurrent });
}
initEditor();
</script>
<style lang="scss" scoped>
.coderBox {
  font-family: fangsong;
  height: 100%;
  display: flex;
  font-weight: bold;
  flex-direction: column;
  .mainBox {
    display: flex;
    justify-content: space-between;
    flex: 1;
    > div {
      background: rgb(255, 255, 255);
    }
  }
}
</style>
